<template>
	<div class="my-echarts" ref="echart"></div>
</template>

<script>
import options from '@/mock/data/echarts.js';
import * as echarts from 'echarts';

export default{
	data(){
		return{
			dom: undefined,
			echart: undefined
		}
	},
	props:{
		type:{
			type: String,
			default: 'pie'
		},
		options:{
			type: Object,
			default: () => ({})
		}
	},
	watch:{
		options(val){
			this.$nextTick(() => {
				this.echart.setOption(val);
			})
		}
	},
	mounted(){
		this.dom = this.$refs.echart;
		this.echart = echarts.init(this.dom);
		this.$store.commit('pushData', {name: 'echarts', data: this.echart});
		this.echart.setOption(options[this.type]);
		this.echart.hideLoading();
	}
}
</script>

<style>
.my-echarts{
	width: 100%;
	min-height: 100px;
}
</style>
